<template>
  <!-- 组件根标签 -->
  <div>
    <h3>vant的基本使用</h3>

    <hr />
    <h3>使用字体图标</h3>
    <i class="iconfont iconbianzu1"></i>
    <i class="iconfont iconicon_xueli"></i>
    <i class="iconfont iconicon_gongsi_qingqitijian"></i>
    <i class="iconfont">&#xe60e;</i>
    <i class="iconfont">&#xe60f; </i>
    <hr />
    <h3>1.0使用vant中的按钮</h3>
    <div class="btn">
      <van-button plain type="primary" icon="fire-o">主要按钮</van-button>
      <van-button
        loading
        loading-type="spinner"
        loading-text="帅哥等.....!!"
        type="info"
        >信息按钮</van-button
      >

      <van-button type="warning">警告按钮</van-button>
      <van-button plain type="danger" block>危险按钮</van-button>
    </div>
    <hr />

    <h3>2.0使用vant中的单元格</h3>

    <van-cell-group>
      <van-cell icon="like" title="左边人" value="右" />
      <van-cell title="左勾拳" value="右沟腿" size="large" :label="text" />
      <van-cell value="我是只设置了value" />
      <van-cell title="左边人" value="右" is-link arrow-direction="up" />
      <van-cell title="去百度" is-link url="https://www.baidu.com/" />
      <van-cell title="去测试组件" is-link to="/usevant/test" />
    </van-cell-group>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: '锄禾日当午,汗滴禾下土,谁知盘中餐'
    }
  },
  methods: {},
  components: {}
}
</script>
<style lang="less">
h3 {
  font-size: 15px;
}
</style>
